<template>
  <div>
    <t-card>
      <t-form :data="serchFormData" layout="inline" label-width="auto">
        <t-form-item label="渠道名称" name="companyName">
          <t-input v-model="serchFormData.companyName" placeholder="请输入渠道名称" type="search" />
        </t-form-item>
        <t-form-item label="票码" name="id">
          <t-input v-model="serchFormData.id" placeholder="请输入票码" type="search" />
        </t-form-item>
        <t-form-item label="批次订单" name="batchOrderId">
          <t-input v-model="serchFormData.batchOrderId" placeholder="请输入批次订单号" type="search" />
        </t-form-item>
        <t-form-item label="票码状态" name="ticketStatus">
          <t-select v-model="serchFormData.ticketStatus" placeholder="请选择票码状态" clearable>
            <t-option v-for="item in BatchTicketStatus" :key="item" :label="batchTicketStatusDict[item]" :value="item" />
          </t-select>
        </t-form-item>
        <t-button :loading="dataLoading" @click="handleSearchClick">
          查询
        </t-button>
      </t-form>
      <t-divider />
      <!-- @vue-expect-error -->
      <t-table :data="data" :columns="columns" :pagination="pagination" row-key="id" cell-empty-content="-" :loading="dataLoading" @page-change="handlePageChange">
        <template #op="{ row }">
          <t-row align="center" :gutter="8">
            <t-button @click="handleTicketQRCodeClick(row)">
              QR 码
            </t-button>
          </t-row>
        </template>
      </t-table>
    </t-card>
    <ticket-q-r-code-dialog :id="ticketQRCode.id" v-model:visible="ticketQRCode.visible" :name="ticketQRCode.name" />
  </div>
</template>
<script setup lang="ts">
import type { PaginationProps, TableProps } from 'tdesign-vue-next'
import { reactive, ref } from 'vue'

import { getBatchTicketPageList } from '@/api/batch'
import type { BatchTicketRes } from '@/api/model/batch'
import { BatchTicketStatus } from '@/api/model/batch'
import { batchTicketStatusDict } from '@/utils/dict/batch'

import TicketQRCodeDialog from './component/TicketQRCodeDialog.vue'

const serchFormData = reactive({
  batchOrderId: '',
  id: '', // 票码
  companyName: '',
  ticketStatus: '' as BatchTicketStatus | '',
})
const pagination = reactive<PaginationProps>({
  current: 1,
  pageSize: 15,
  total: 0,
})
const dataLoading = ref(false)
const data = ref<BatchTicketRes[]>([])
const columns: TableProps<BatchTicketRes>['columns'] = [
  {
    colKey: 'id',
    title: 'ID',
  },
  {
    colKey: 'batchOrderId',
    title: '批次ID',
  },
  {
    colKey: 'companyName',
    title: '渠道名称',
  },
  {
    colKey: 'ticketName',
    title: '票类',
  },
  {
    colKey: 'ticketPrice',
    title: '票价',
  },
  {
    colKey: 'ticketStatus',
    title: '票状态',
    cell: (_, { row }) => {
      return batchTicketStatusDict[row.ticketStatus]
    },
  },
  {
    colKey: 'createDate',
    title: '创建时间',
  },
  {
    colKey: 'op',
    title: '操作',
  },
]
function fetchData() {
  dataLoading.value = true
  getBatchTicketPageList({ page: pagination.current!, size: pagination.pageSize!, ...serchFormData }).then((res) => {
    data.value = res.data
    pagination.total = res.total
  }).finally(() => {
    dataLoading.value = false
  })
}
fetchData()
function handleSearchClick() {
  fetchData()
}
function handlePageChange(pageInfo: PaginationProps) {
  pagination.current = pageInfo.current
  pagination.pageSize = pageInfo.pageSize
  fetchData()
}
const ticketQRCode = ref({
  id: '',
  name: '',
  visible: false,
})
function handleTicketQRCodeClick(row: BatchTicketRes) {
  ticketQRCode.value = {
    id: row.id,
    name: row.ticketName,
    visible: true,
  }
}
</script>
<style scoped>

</style>
